<template>
	
	<view class="container">
		<!-- 图片轮播 -->
		<vear-carousel :img-list="imgList" url-key="src" @selected="selectedBanner"></vear-carousel>
		<!-- 返回 -->
		<view class="back" @click="addback">
			<image src="../../static/assets/back2.png" mode=""></image>
		</view>
		<!-- 房源信息 -->
		<view class="maininfo">
			<view class="title">
				<text>{{houseObj.hire_way}}</text>-
				<text>{{houseObj.sub_name}}</text>
			</view>
			<view class="tags">
				<block v-for="item in houseObj.tagslist">
					<text class="tagitem">{{item}}</text>
				</block>
			</view>
			<text class="price">￥{{houseObj.pay}}</text>
		</view>
		<!-- 基础设施 -->
		<view class="facility">
			
			<view class="item">
				<text class="type">户型</text>
				<text>{{houseObj.house_type}}</text>
			</view>
			<view class="item">
				<text class="type">面积</text>
				<text>{{houseObj.floor_area}}</text>
			</view>
			<view class="item">
				<text class="type">楼层</text>
				<text>{{houseObj.floor}}</text>
			</view>
		</view>
		<!-- 房源设施 -->
		<text class="public">房源设施</text>
		<view class="facility_list">
			<view class="list">
				<block v-for="item in houseObj.facilitylist">
					<view class="item">
						<view class="pic">
							<image :src="item.icon_url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</block>
			</view>
		</view>
		<!-- 小区详情-->
		<text class="address">{{houseObj.sub_name}}</text>
		<view class="tablist">
			<block v-for="(item,index) in tablist" v-bind:key="item.id">
				<view class="tabitem" @click="addclick(index)" v-bind:class="{'active':currentTab==index}">
					<image :src="currentTab==index?item.url2:item.url" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</block>
		</view>
		<!-- tab选项卡内容 -->
		<view class="tabcontent">
			<view class="area_img">
				<image :src="houseObj.locationImg" mode=""></image>
			</view>
			<view class="content">
				<block v-for="(item,index) in tablist" v-bind:key="item.id">
					<view class="current_content" v-if="currentContent==index">
						<block v-for="items in item.data">
							<text>{{items}}</text>
						</block>
					</view>
				</block>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<image :src="showCollected==true?url2:url1" mode="" @click="addCollect(houseObj)"></image>
			<image :src="showAppointed==true?url4:url3" mode="" @click="open"></image>
			<navigator class="btn" :url="'../communicate/communicate?subname='+`${houseObj.sub_name}`+'&id='+`${houseObj.id}`" >联系房东</navigator>
		</view>
		<UniCalendar
				ref="calendar"
			    :insert="false"				
			    @confirm="confirm">
		</UniCalendar>
	</view>
</template>

<script>
	import {houseDetail} from "../../data/housedetail.js"
	import vearCarousel from "../../components/vear-carousel/vear-carousel.vue";
	import UniCalendar from "../../uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue";
	import store from "../../store/index.js";
	export default {
		components:{
			vearCarousel,
			UniCalendar
		},
		data() {
			return {
				person:{},
				url1:'../../static/assets/love.png',
				url2:'../../static/assets/like_on.png',
				url3:'../../static/assets/rili.png',
				url4:'../../static/assets/rili_on.png',
				houseObj:{},
				currentTab:0,
				currentContent:0,
				collectList:[],
				appointList:[],
				showCollected:false,//已收藏则高亮显示
				showAppointed:false,//已预约则高亮显示
				imgList:[//轮播图
					{
						 src: 'https://img9.51tietu.net/pic/2019-091200/vgkpidei2tjvgkpidei2tj.jpg',
						 id: 1
					 },{
						 src: 'https://img9.51tietu.net/pic/2019-091200/euzekmi5m23euzekmi5m23.jpg',
						 id: 2
					 },{
						 src: 'https://img9.51tietu.net/pic/2019-091200/143tt0ta4sr143tt0ta4sr.jpg',
						 id: 3,
					},{
						 src: 'https://img9.51tietu.net/pic/2019-091200/ff1vqwm3q33ff1vqwm3q33.jpg',
						 id: 4
					}
				],
				tablist:[//tab选项卡
					{
						id:1,
						text:'地址',
						url:'../../static/assets/location.png',
						url2:'../../static/assets/location_on.png',
						data:['fname','name','address']
						
					},{
						id:2,
						text:'交通',
						url:'../../static/assets/jiaotong.png',
						url2:'../../static/assets/jiaotong_on.png',
						data:['133路;133路区间;144路;381路;83路;专13路;北广场免费摆渡车;夜18路;夜4路;414路',
						'4号线\/大兴线(陶然亭站)，步行6分钟|4号线\/大兴线;7号线(菜市口站)']
					},{
						id:3,
						text:'周边',
						url:'../../static/assets/shop.png',
						url2:'../../static/assets/shop_on.png',
						data:['北平食府、老五四季涮肉、局气','虎坊路百货、永安路百货商场、老白广路商场','中国银行、北京市健宫医院、北京育才学校']
					}
				]
			}
		},
		methods: {
			islogin(){
				// uni.getStorage({
				// 	key:"set_logined",
				// 	success:(res)=>{
				// 		console.log(res.data)
				// 	},
				// 	fail:(err)=>{
				// 		console.log(err);
				// 		if(err){
				// 			uni.navigateTo({
				// 				url:"../login/login"
				// 			})
				// 		}
				// 	}
				// })
			},
			open(){
			    this.$refs.calendar.open();//弹出日历
			},
			confirm(e) {
				if(e){
					this.showAppointed=true;
					let time=e.fulldate;//点击确定得到的时间
					let obj=this.houseObj;
					obj.booktime=time;//对象添加时间
					this.$store.commit('setAppointObj',obj);
					if(this.appointList.length==0){
						this.appointList.push(obj);
					}
					else{
						let temp2=-1;
						this.appointList.forEach((item,index)=>{
							if(obj.id==item.id){
								temp2=index;
							}
						})
						if(temp2!=-1){
							this.appointList.splice(temp2,1);
						}
						this.appointList.unshift(obj);
						uni.setStorage({
							key:'set_appointList',
							data:this.appointList,
							success:function() {
								console.log('预约成功');
								uni.showToast({
									title:'预约成功',
									icon:"success",
									duration:1000,
									mask:true
								})
							}
						})
					}
				}
			},
			selectedBanner(item, index) {
				// console.log('ooooooo', item, index)
			},
			addback(){//返回
				uni.navigateBack();
			},
			addclick(index){//点击选项卡
				this.currentTab=index;
				this.currentContent=index;
			},
			//获取信息
			getdata(option_id){
				let getid;
				let detailIndex=-1;
				houseDetail.forEach((item,index)=>{
					// console.log(item.result.info_test.house_id,index);
					getid=item.result.info_test.house_id;
					if(option_id==getid){
						detailIndex=index;
					}
				})
				if(detailIndex!=-1){
					// console.log(detailIndex);
					// console.log(houseDetail[detailIndex].result);
					let result=houseDetail[detailIndex].result;
					//轮播图
					let imglist=result.agency_house_photo_info;
					this.imgList=imglist;
					// tab内容
					let info=result.info_test;
					this.tablist[0].data=[info.fname,info.name,info.address];
					this.tablist[1].data=[info.bus_desc,info.subway_desc];
					this.tablist[2].data=[info.foods,info.shops,info.lives];
					// 支付细节
					let payinfo=info.pay_info.payDetail[0];
					let obj={};
					obj.id=info.house_id;
					obj.house_main_image=result.house_main_image;
					obj.hire_way=info.hire_way;
					obj.sub_name=info.sub_name;
					obj.tagslist=result.house_labels;
					obj.pay=result.price;
					obj.floor=info.base_info.floor;
					obj.floor_area=info.base_info.floor_area;
					obj.house_type=info.base_info.house_type;
					obj.facilitylist=result.facilities_common;
					obj.locationImg=info.location_url;
					// 具体地址
					obj.address=info.fname+' '+info.name+' '+info.address;
					// 支付细节
					obj.rent=payinfo.rent;
					obj.payway=payinfo.title
					obj.totalrent=payinfo.totaltitle+payinfo.totalrent;
					// 热线电话
					obj.hotline=result.public_complain_mobile;
					// 看房时间
					obj.suitabaltime=result.lease_inception;
					//判断是否有被收藏标识
					obj.iscollected=false;
					// 判断是否已经预约标识
					obj.isappointed=false;
					// 预约时间
					obj.booktime='2022-01-20';
					this.houseObj=obj;
					this.$store.commit('setHouseObj',obj);
				}
				
			},
			//点击收藏
			addCollect(obj){
				uni.getStorage({//先获取登录状态 有登录才进行操作
					key:"set_logined",
					success:(res)=>{
						// console.log(res.data);
						this.$store.commit('setCollectObj',obj);
						if(!obj.iscollected){//添加收藏
							this.showCollected=true;//收藏高亮
							obj.iscollected=true;//改变收藏属性
							if(this.collectList.length==0){// 无收藏数据
								this.collectList.push(obj);
							}
							else{//有收藏数据
								let temp=-1;
								this.collectList.forEach((item,index)=>{
									if(obj.id===item.id){//有收藏过
										temp=index;
									}
								})
								if(temp!=-1){
									this.collectList.splice(temp,1);
								}
								this.collectList.unshift(obj);
								console.log(this.collectList);
							}
							// 将更新之后的收藏列表保存本地
							uni.setStorage({
								key:'set_collectlist',
								data:this.collectList,
								success: function() {
									console.log('收藏成功');
									uni.showToast({
										title:'收藏成功',
										icon:"success",
										duration:1000,
										mask:true
									})
									uni.getStorage({
										key:'set_collectlist',
										success:(res)=> {
											console.log(res.data)
										}
									})
								}
							})
						}
						else if(obj.iscollected){//取消收藏
							obj.iscollected=false;
							this.showCollected=false;
							let temp=-1;
							this.collectList.forEach((item,index)=>{
								if(obj.id===item.id){
									temp=index;
								}
							})
							this.collectList.splice(temp,1);
							uni.setStorage({
								key:'set_collectlist',
								data:this.collectList,
								success() {
									console.log('取消收藏');
									uni.showToast({
										title:'取消收藏成功',
										icon:"success",
										duration:1000,
										mask:true
									})
								}
							})
						}
					},
					fail:(err)=>{
						console.log('请先登录');
						if(err){
							uni.navigateTo({
								url:"../login/login"
							})
						}
					}
				})
				
				
			},
			// 跳转联系房东页
			// tocommunicate(){
			// 	uni.navigateTo({
			// 		url:"'../communicate/communicate?id='+"
			// 	})
			// }
			
		},
		onLoad(option){
			// console.log(JSON.parse(option.id))
			// console.log(JSON.parse(decodeURIComponent(option.id))
			// console.log(option.id);
			// console.log(houseDetail);
			this.getdata(option.id);//渲染数据
			uni.getStorage({//页面加载的时候获取本地收藏
				key:"set_collectlist",
				success: (res) => {
					console.log(res.data)
					// console.log(JSON.parse(res.data))
					if(res.data.length!=0){
						this.collectList=res.data;
						this.collectList.forEach((item)=>{
							// console.log(item.id)
							if(option.id===item.id){
								this.showCollected=true;
							}
						})
					}
					else{
						this.collectList=[]
					}
				}
			})
			uni.getStorage({//页面加载的时候获取本地预约
				key:"set_appointList",
				success: (res) => {
					// console.log(res.data);
					this.appointList=res.data;
					this.appointList.forEach((item)=>{
						// console.log(item.id)
						if(option.id===item.id){
							this.showAppointed=true;
						}
					})
				}
			})
			
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	height: 100%;
	padding-top: 30rpx;
	position: relative;
	padding-bottom: 300rpx;
	// 返回
	.back{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #585eaa;
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// 详细信息
	.maininfo{
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		.title{
			width: 100%;
			text{
				font-size: 1.3rem;
				font-weight: bold;
				color: #464547;
			}
		}
		.tags{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 0.5rem;
			.tagitem{
				display: block;
				padding: 0.3rem 0.5rem;
				font-size: 0.8rem;
				color:#464547 ;
				border-radius: 10rpx;
				background-color: #F1F1F1;
				margin-right: 10rpx;
			}
		}
		.price{
			display: block;
			margin-top: 10rpx;
			font-size: 1.5rem;
			font-weight: bold;
			color: #585eaa;
		}
	}
	// 基础信息
	.facility{
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		border-radius: 10rpx;
		overflow: hidden;
		.item{
			width:33%;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #F1F1F1;
			text{
				color: #555555;
				padding-left: 10rpx;
			}
		}
	}
	// 房源设施
	.public{
		display: block;
		margin-top: 30rpx;
		margin-left: 40rpx;
		font-size: 1.1rem;
		font-weight: bold;
		color: #464547;
	}
	.facility_list{
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
		overflow:scroll;
		.list{
			width: 160%;
			display: flex;
			.item{
				width: 120rpx;
				// height: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// background-color: #dddddd;
				margin-right: 10rpx;
				.pic{
					width: 90%;
					height: 100rpx;
					// background-color: #eeeeee;
					image{
						width: 100%;
						height: 100%;
					}
				}
				text{
					
				}
			}
		}
		&::-webkit-scrollbar{
			width: 0;
			height: 0;
			opacity: 0;
		}
	}
	// 小区详情
	// tab
	.address{
		display: block;
		margin-top: 30rpx;
		margin-left: 40rpx;
		font-size: 1.1rem;
		font-weight: bold;
		color: #464547;
	}
	.tablist{
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		color: #464547;
		.tabitem{
			width: 33%;
			// background-color: #eeeeee;
			display: flex;
			justify-content: center;
			padding: 0.6rem 0;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			text{
				text-align: center;
				padding-left:10rpx;
				font-size: 1.1rem;
			}
		}
		.active{
			text{
				color: #585eaa;
			}
		}
	}
	.tabcontent{
		width: 95%;
		margin: 0 auto;
		.area_img{
			width: 100%;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			width: 100%;
			// height: 200rpx;
			background-color: #eeeeee;
			.item{
				width: 90%;
				// height: 100%;
				margin: 0 auto;
				padding: 40rpx 0 ;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				display: none;
				text{
					padding: 0.2rem 0.3rem;
				}
			}
			.current_content{
				display: block;
				width: 90%;
				// height: 100%;
				margin: 0 auto;
				padding: 40rpx 0;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				text{
					padding: 0.2rem 0.3rem;
				}
			}
		}
	}
	// 底部
	.footer{
		width: 100%;
		padding: 0.4rem;
		background-color:  #585eaa;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		image{
			display: block;
			width: 80rpx;
			height:80rpx;
		}
		.btn{
			width: 60%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 20rpx;
			background-color:  #afb4db;
			color: #FFFFFF;
			font-size: 1.2rem;
			margin-right: 20rpx;
		}
	}
}
::-webkit-scrollbar{
			width: 0;
			height: 0;
			opacity: 0;
		}

</style>
